<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        body{
            padding: 0;
            margin: 0;
            width: 100vw;
            height: 100vh;
            background: linear-gradient(to bottom, #fff, #e2f2f0);
        }
        .top_layout{
            display: flex;
            flex-direction: row;
            align-items: flex-end;
        }
        .top_image{
            width: 33%;
            font-size: 20px;
        }
        .active_top_image{
            width: 33%;
            font-size: 20px;
            height: 40px !important;
        }
        .body_layout{
            padding: 0 20px;
        }
        .search_layout{
            display: flex;
        }
        .search_input_layou{
            display: flex;
            padding: 10px;
            width: 80vw;
            border-radius: 20px;
            background-color: #CFF1F1;
        }
        .search_img{
            width: 20px;
            height: 20px;
        }
        .search_input{
            flex: 1;
            display: flex;
        }
        .input{
            border: none;
            width: 100%;
            background-color: transparent;
        }
        input::-ms-input-placeholder{
            text-align: center;
            color: #ccc;
            font-size: 19px;
        }
        input::-webkit-input-placeholder{
            text-align: center;
            color: #ccc;
            font-size: 19px;
        }
        .setting{
            width: 40px;
            height: 40px;
            line-height: 40px;
        }
        .title{
            font-size: 24px;
            font-weight: bold;
            color: #ccc;
            margin-top: 20px;
        }
        .study_layout{
            width: 100%;
            height: 150px;
            background-color: #CFF1F1;
            border-radius: 20px;
            display: flex;
        }
        .study_img{
            height: 150px;
            width: 170px;
        }
        .study_text_layout{
            flex: 1;
            color: #ccc;
        }
        .my_study{
            font-size: 30px;
            font-weight: bold;
            text-align: center;
            margin-top: 30px;
        }
        .last_study{
            margin-top: 20px;
            font-size: 15px;
            margin-top: 20px;
        }
        .function_layout{
            display: flex;
            height: 220px;
            margin-top: 10px;
        }
        .word_layout{
            width: 120px;
            background: #FADEDE;
            border-radius: 20px;
        }
        .word_text{
            font-weight: bold;
            font-size: 25px;
            color: #ccc;
            text-align: center;
            margin-top: 10px;
        }
        .word_img{
            flex: 1;
            height: 160px;
            width: 120px;
        }
        .other_layout{
            flex: 1;
        }
        .other_top_layout{
            display: flex;
        }
        .freign_layout{
            height: 100px;
            background: #F8F8D6;
            width: 120px;
            margin-left: 10px;
            border-radius: 20px;
            position: relative;
        }
        .fregin_test{
            font-weight: bold;
            font-size: 20px;
            color: #ccc;
            text-align: center;
            padding-top: 10px;
            z-index: 200;
            position: absolute;
            top: 0;
            left: 40px;
        }
        .foreign_img{
            height: 85px;
            display: flex;
            justify-content: center;
            width: 100%;
            padding-top: 10px;
            opacity: 0.5;
            z-index: 1;
        }
        .music_layout{
            height: 100px;
            background: #CFF1F1;
            width: 120px;
            margin-left: 10px;
            border-radius: 20px;
            position: relative;
        }
        .music_img{
            height: 130px;
            display: flex;
            justify-content: center;
            width: 100%;
            opacity: 0.5;
            z-index: 1;
        }
        .music_test{
            font-weight: bold;
            font-size: 20px;
            color: #ccc;
            text-align: center;
            padding-top: 10px;
            z-index: 200;
            position: absolute;
            top: 0;
            left: 20px;
        }
        .other_bottom_layout{
            display: flex;
            margin-top: 20px;
        }
        .grammar_layout{
            height: 100px;
            background: #CFE6F1;
            width: 120px;
            margin-left: 10px;
            border-radius: 20px;
            position: relative;
        }
        .grammar_img{
            padding-top: 10px;
            height: 90px;
            display: flex;
            justify-content: center;
            width: 100%;
            opacity: 0.5;
            z-index: 1;
        }
        .grammar_test{
            font-weight: bold;
            font-size: 20px;
            color: #ccc;
            text-align: center;
            padding-top: 10px;
            z-index: 200;
            position: absolute;
            top: 0;
            left: 40px;
        }
        .interest_layout{
            height: 100px;
            background: #CFD0F1;
            width: 120px;
            margin-left: 10px;
            border-radius: 20px;
            position: relative;
        }
        .interest_img{
            padding-top: 10px;
            height: 90px;
            display: flex;
            justify-content: center;
            width: 100%;
            opacity: 0.5;
            z-index: 1;
        }
        .interest_test{
            font-weight: bold;
            font-size: 20px;
            color: #ccc;
            text-align: center;
            padding-top: 10px;
            z-index: 200;
            position: absolute;
            top: 0;
            left: 20px;
        }
        .practice_layout{
            display: flex;
            width: 100%;
            justify-content: space-around;
        }
        .practice_left_layout{
            height: 100px;
            background: #CAE8E8;
            width: 48%;
            border-radius: 20px;
            display: flex;
            align-items: flex-end;
        }
        .parctice_content{
            display: flex;
            margin: 20px 20px 0 20px;
            font-size: 19px;
            font-weight: bold;
            color: #ccc;
            margin-bottom: 50px;
        }
        .parctice_image{
            width: 60px;
            height: 80px;
        }
        .daily_layout{
            height: 120px;
            border-radius: 20px;
            background: #ffffff;
            margin-top: 20px;
            padding: 0px 0px 10px 10px;
            position: relative;
        }
        .daily_image{
            position: absolute;
            top: 0;
            right: 0;
            opacity: 0.5;
            width: 200px;
            height: 150px;
        }
        .daily_test{
            padding-top: 10px;
            margin: 0px 0px 0px 10px;
            font-weight: bold;
            font-size: 20px;
            color: #ccc;
        }
        .daily_content{
            padding: 10px;
            text-align: center;
            margin-bottom: 10px;
        }
    </style>
    <script>
        // 星期一对 月曜日 星期二对 火曜日 星期三对 水 四对木 五对金 六对土 星期天对日曜日
        let dict = {
            0:"日曜日",
            1:"月曜日",
            2:"火曜日",
            3:"水曜日",
            4:"木曜日",
            5:"金曜日",
            6:"土曜日"
        }
        // 获取当前日期和时间
        const now = new Date();

        // 获取年份
        const year = now.getFullYear();

        // 获取月份（0-11，0表示一月）
        const month = now.getMonth();

        // 获取日期（一个月中的哪一天）
        const date = now.getDate();

        // 获取星期（0-6，0表示星期日）
        const dayOfWeek = now.getDay();

        const text = year + '/' + (month + 1) + '/' + date + '   ' + dict[dayOfWeek]
        // const newElement = document.createElement('p');
        // newElement.textContent = text;
        // document.getElementById('date').textContent = text;
        // 打印结果
        // console.log("年：", year);
        // console.log("月：", month + 1); // 月份是从0开始的，所以需要加1
        // console.log("日：", date);
        // console.log(text)
        // console.log("星期：", dayOfWeek); // 星期是从0开始的，所以0表示星期日
        // 确保 DOM 完全加载后再执行脚本
        document.addEventListener('DOMContentLoaded', function() {
            // 获取 div 元素
            const notificationDiv = document.getElementById('date');
            // 检查元素是否存在于 DOM 中
            if (notificationDiv) {
                // 设置 textContent
                notificationDiv.textContent = text;
            } else {
                // 如果元素不存在，则创建一个新的 div 元素
                const newDiv = document.createElement('div');
                newDiv.id = 'date';
                newDiv.textContent = text;
                
                // 将新创建的 div 元素添加到 body 中
                document.body.appendChild(newDiv);
            }
        });

    </script>
</head>
<body>
    <!-- 顶部 -->
    <div class="top_layout">
        <img class="active_top_image" src="http://yao-di-kdj.gitee.io/japanese-with-sichuan-pepper/标签绿.png" />
        <img class="top_image" src="http://yao-di-kdj.gitee.io/japanese-with-sichuan-pepper/标签粉.png" />
        <img class="top_image" src="http://yao-di-kdj.gitee.io/japanese-with-sichuan-pepper/标签绿.png" />
    </div>
    <div class="body_layout">
        <!-- 搜索框 -->
        <div class="search_layout">
            <div class="search_input_layou">
               <a href="https://fanyi.baidu.com/#auto/zh/"> <img src="http://yao-di-kdj.gitee.io/japanese-with-sichuan-pepper/搜索.png" class="search_img"></a>
                <div class="search_input">
                    <input 
                        class="input" 
                        type="text" 
                        placeholder="请输入要翻译的文本"  
                        placeholder-class="input-placeholder" 
                    />
                </div>
            </div>
        <div>
            <a href="http://yao-di-kdj.gitee.io/he-ci-dao/intr.html"> <img src="http://yao-di-kdj.gitee.io/japanese-with-sichuan-pepper/设置.png" class="setting"/></a>
        </div>
        </div>
        <!-- 日期 -->
        <div class="title" id="date">
            <!-- 2023/10/15  日曜日 -->
        </div>
        <!-- 我的学习 -->
        <div class="study_layout">
            <img src="http://yao-di-kdj.gitee.io/japanese-with-sichuan-pepper/我的学习.png" class="study_img" />
            <div class="study_text_layout">
                <div class="my_study">我的学习</div>
                <div class="last_study">上次学习到:</div>
            </div>
        </div>
        <div class="title">
            功能
        </div>
        <div class="function_layout">
            <div class="word_layout">
                <div class="word_text">单词卡片</div>
                <div>
                    <a href="https://yao-di-kdj.gitee.io/he-ci-dao/15.html"><img src="http://yao-di-kdj.gitee.io/japanese-with-sichuan-pepper/单词卡片.png" class="word_img"/></a>
                </div>
            </div>
            <div class="other_layout">
                <div class="other_top_layout">
                    <div class="freign_layout">
                        <div class="foreign_img">
                           <img src="http://yao-di-kdj.gitee.io/japanese-with-sichuan-pepper/外刊.png" />
                        </div>
                        <a href="http://yao-di-kdj.gitee.io/he-ci-dao/12.html"><div class="fregin_test">外刊</div></a>
                    </div>
                    <div class="music_layout">
                        <div class="music_img">
                            <img src="http://yao-di-kdj.gitee.io/japanese-with-sichuan-pepper/五十音图.png" />
                        </div>
                        <a href="http://yao-di-kdj.gitee.io/he-ci-dao/13.html"><div class="music_test">五十音图</div></a>
                    </div>
                </div>
                <div class="other_bottom_layout">
                    <div class="grammar_layout">
                        <div class="grammar_img">
                           <img src="http://yao-di-kdj.gitee.io/japanese-with-sichuan-pepper/文法.png" />7
                        </div>
                        <a href="https://yao-di-kdj.gitee.io/he-ci-dao/9.html"><div class="grammar_test">文法</div></a>
                    </div>
                    <div class="interest_layout">
                        <div class="interest_img">
                           <img src="http://yao-di-kdj.gitee.io/japanese-with-sichuan-pepper/趣味学习.png" />
                        </div>
                        <a href="http://yao-di-kdj.gitee.io/he-ci-dao/998.html"> <div class="interest_test">趣味学习</div></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="title">
            练习
        </div>
        <div class="practice_layout">
            <div class="practice_left_layout">
                <a href="https://yao-di-kdj.gitee.io/he-ci-dao/11.html"><div class="parctice_content">考试题库</div></a>
               <img src="http://yao-di-kdj.gitee.io/japanese-with-sichuan-pepper/考试题库.png" class="parctice_image" />
            </div>
            <div class="practice_left_layout">
                <a href="https://yao-di-kdj.gitee.io/he-ci-dao/17.html"></a><div class="parctice_content">听力训练</div></a>
                <img src="http://yao-di-kdj.gitee.io/japanese-with-sichuan-pepper/听力训练.png" class="parctice_image" />
            </div>
        </div>
        <div class="daily_layout">
            <img src="http://yao-di-kdj.gitee.io/japanese-with-sichuan-pepper/每日一句.png" class="daily_image" />
            <div class="daily_test">每日一句</div> 
           
            <div id="dailyContent" class="daily_content">
              <!-- This is where the daily content will be displayed -->
            </div>
            
            <script>
              // Define an array of content for each day
              var dailyContent = [
                "	世の中に失敗というものはない。チャレンジしているうちは失敗はない。あきらめた時が失敗である。—— 稲盛和夫 世上没有所谓的失败。挑战时没有失败，放弃时才是失败。——稻盛和夫（企业家）",
                "	人间が人间として生きていくのに一番大切なのは、头の良し悪しではなく、心の良し悪しだ。——中村天风 人作为人存在时，最重要的不是头脑的好坏，而是心地的好坏。",
                "	なかなかうまくいかないのが人生です。うまくいかない時を頑張って越えるから、成長していくのです。 人生总伴随着不顺，只有努力度过不顺期，人才会成长。",
                "   失敗はおわりではない、諦めるこそが終わりである。ゴールが見えないから人生はおもしろい。 失败并非结束，放弃才是完结。正由于看不到终点，人生才有趣。",
                "   実力の差は努力の差、実績の差は責任感の差。实力的差距就是努力的差距，实际成绩的差距就是责任感的差距",
                "   人を信じよ、しかしその百倍も自らを信じよ。相信别人，更要一百倍地相信自己。",
                "   人生に梦があるのではなく、梦が人生をつくるのです。  不是人生该有梦想，而是梦想造就了人生"
           
              ];
            
              // Get the current date
              var currentDate = new Date();
              var currentDayIndex = currentDate.getDay(); // Get the index of the current day (0 = Sunday, 1 = Monday, ..., 6 = Saturday)
              
              // Get the div element where the daily content will be displayed
              var dailyContentDiv = document.getElementById("dailyContent");
            
              // Display the content for the current day
              var contentToShow = dailyContent[currentDayIndex];
              var contentParagraph = document.createElement("p"); // Create a new paragraph element
              contentParagraph.textContent = contentToShow; // Set the text content of the paragraph to the content for the current day
              dailyContentDiv.appendChild(contentParagraph); // Append the paragraph to the div element
            </script>
            
            
        </div>
    </div>
   
    
</body>
</html>